<template>
  <div class="container">
    <el-container>
      <el-aside class="aside" style="background-color: #545c64">
        <el-menu :unique-opened="true" active-text-color="#ffd04b" background-color="#5b6874" class="el-menu-vertical-demo" default-active="2" text-color="#fff">
          <el-sub-menu style="background-color: #545c64;" v-for="(menu, index) in data.menus" :key="menu.en" :index="index + 1 + ''" v-show="!menu.hidden">
            <template #title>
              <span>{{ util.language(menu.cn, menu.en) }}</span>
            </template>
            <el-menu-item v-for="(page, index2) in menu.pages" :index="index + '-' + index2" :key="page.path" @click="router.push('/' + page.path)">{{ util.language(page.cn, page.en) }}</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header" style="display: flex; justify-content: space-between;">
          <div style="display: flex; justify-content:flex-start;">
            <div style="margin-right: 20px;">
              <el-text>OTS - </el-text>
              <el-text>{{ util.language('销售系统', 'Sales System') }}</el-text>
            </div>
            <div style="margin-right: 20px;">
              <el-text>{{ util.language('语言：', 'Language: ') }}</el-text>
              <el-select size="small" v-model="language" style="width: 100px" @change="changeLanguage">
                <el-option label="中文" value="cn" />
                <el-option label="English" value="en" />
              </el-select>
            </div>
          </div>
          <div style="display: flex; justify-content:flex-end;">
            <div style="margin-right: 20px;">
              <el-link @click="router.push('/my')">{{ user.nick }}</el-link>
            </div>
            <div style="margin-right: 20px;">
              <el-link @click="logout()">{{ util.language('退出', 'Logout') }}</el-link>
            </div>
          </div>
        </el-header>
        <el-main class="main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '../apis/api'
import menusConf from '../router/menusConf'
import cache from '../utils/cache'
import util from '../utils/util'

const router = useRouter()
const user = cache.getObject(cache.keys.loginUser) || {}
const language = ref(util.language())

const data = reactive({
  menus: [],
  menuQuantity: 0,
})

api.get('/backend/user/getMyInfo').then(res => {
  if (res.admin) {
    data.menus = menusConf.filter(false)
  } else {
    data.menus = menusConf.filter(false, res.role.menuList)
  }
  let menuQuantity = 0
  data.menus.forEach(menu => {
    menuQuantity += menu.pages.length
  })
  data.menuQuantity = menuQuantity
})

const changeLanguage = (language) => {
  ElMessage.success(util.language('切换语言成功', 'Change language successfully'))
  cache.setString(cache.keys.language, language)
  setTimeout(() => {
    location.reload()
  }, 1000)
}

const logout = () => {
  api.post('/backend/user/logout').then(() => {
    cache.setObject(cache.keys.loginUser, null)
    ElMessage.success(util.language('安全退出', 'Logout successfully'))
    router.push('/login')
  })
}
</script>

<style lang="less">
.container {
  .aside {
    width: 250px;
    height: 100vh;
  }

  .header {
    height: 49px;
    line-height: 49px;
    overflow: hidden;
    border-bottom: 1px solid #eee;
  }

  /deep/ .el-menu {
    background-color: #5b6874;
  }

  /deep/ .el-submenu .el-menu {
    background-color: #283847;
  }
}
</style>